<template>
  <div class="exportMergeHeader-container common-container">
    <div class="export-config">
      <label class="export-label-config">
        <span class="label-name">文件名:</span>
        <el-input
          v-model="filename"
          placeholder="请输入文件名"
          clearable
          style="width: 200px; margin-left: 10px; margin-right: 10px;"
        ></el-input>
      </label>
      <el-button class="export-config-button" type="primary" @click="exportExcel">
        <i class="el-icon-download"></i>导出
      </el-button>
    </div>
    <div class="export-data">
      <el-table
        :data="tableData"
        border
      >
        <template v-for="item in column">
          <template v-if="item.children">
            <el-table-column :prop="item.name" :label="item.label" :width="item.width">
              <template v-for="ite in item.children">
                <template v-if="ite.children">
                  <el-table-column :prop="ite.name" :label="ite.label" :width="ite.width">
                    <template v-for="it in ite.children">
                      <el-table-column :prop="it.name" :label="it.label" :width="it.width"></el-table-column>
                    </template>
                  </el-table-column>
                </template>
                <el-table-column v-else :prop="ite.name" :label="ite.label" :width="ite.width"></el-table-column>
              </template>
            </el-table-column>
          </template>
          <el-table-column v-else :prop="item.name" :label="item.label" :width="item.width"></el-table-column>
        </template>
      </el-table>
    </div>
  </div>
</template>

<script>
import { publicController} from '@/utils/publicPackage.js'
import { exportMultiHeaderExcel} from '@/utils/exportExcel'
export default {
  name: 'index',
  mixins:[ publicController ],
  data(){
    return{
      filename: '配送信息',
      tableData: [],
      column:[
        {name: 'date', label: '日期', levels: 1, position: 'A'},
        {label: '配送信息', levels: 3, position: 'B',
          children:[
            {name: 'name', label: '姓名', levels: 1, position: 'B'},
            {name: 'gender', label: '性别', levels: 1, position: 'C'},
            {name: 'phone', label: '手机号', levels: 1, position: 'D'},
            {label: '地址信息', levels: 2, position: 'E',
              children:[
                {name: 'address', label: '地址', levels: 1, position: 'E', width: '250'},
                {name: 'city', label: '城市', levels: 1, position: 'F'},
                {name: 'region', label: '城区', levels: 1, position: 'G'},
                {name: 'postalCode', label: '邮编', levels: 1, position: 'H'},
              ]
            }
          ],
        },
      ],
    }
  },
  mounted () {
    this.getDeliveryData(8)
  },
  methods:{
    exportExcel(){
      const options ={
        column: this.column,
        data: this.tableData,
        filename: this.filename,
        autoWidth: true,
      }
      exportMultiHeaderExcel(options)
    }
  }
}
</script>

<style lang="scss" scoped>
.export-config{
  height: 60px;
  width: 100%;
  border-bottom: 2px solid #f4f4f4;
  display: flex;
}
.export-label-config{
  .label-name{
    font-weight: 600;
    color: #4787d2;
  }
  .el-input{
    height: 30px;
    .el-input__inner{
      height: 30px;
      line-height: 30px;
    }
  }
}
.export-data{
  margin-top: 20px;
}
</style>
<style lang="scss">
.export-label-config{
  .el-input__inner{
    height: 30px;
    line-height: 30px;
  }
  .el-input__icon{
    line-height: 30px;
  }
}
.export-config-button{
  height: 30px;
  line-height: 30px;
  padding: 0 15px;
  background-color: $primaryColor;
  border: 1px solid $primaryColor;
}
</style>
